<template>
  <view>
    <u-navbar title="绑定苹果" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />

    <button v-if="!isBinded" plain="true" class="margin-auto h-80 w-400 br-10 fz-30 flex align-center justify-center border-000000 color-000" @click="bind">
      <image class="w-48 h-48 mr-10" src="@/static/images/common/apple.png"></image>
      一键绑定苹果
    </button>

    <view v-else class="flex flex-column align-center fz-40 ">
      <text class="mt-200 lh-42">已绑定</text>
      <image class="mt-50 w-120 h-120 br-round" :src="avatarUrl"></image>
      <view class="mt-100 bg-FF6262 w-400 h-80 br-10 text-center lh-80 color-fff fz-30" @tap="bindCancel">
        <text>解绑苹果</text>
      </view>
    </view>
    <u-popup v-model="popShow" mode="bottom">
      <view class="flex flex-column align-center">
        <view class="bg-000 w-500 h-80 mt-32 lh-80 text-center color-fff fz-30 br-10" @tap="confirmCancel">
          <text>确认解绑苹果</text>
        </view>
        <view class="color-000 w-500 h-80 mt-30 lh-80 text-center border-000000 br-10 mb-30" @tap="popShow = false">
          <text>取消</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getUserProfile } from '@/api/system/user.js'
import { identity, unbind } from '@/api/auth/social.js'
export default {
  name: "bind-apple",
  data(){
    return {
      popShow:false,
      isBinded:false,
      avatarUrl:undefined,
    }
  },
  created(){
    getUserProfile().then(res => {
      if(res.data.socials){
        this.isBinded = res.data.socials.some(item => {
          return item.source === 'apple'
        })
        this.avatarUrl = res.data.socials.find(item => {
          return item.source === 'apple'
        })?.avatar
      }
    })
  },
  methods:{
    bind() {
      uni.login({
        provider: 'apple',
        success: (loginRes) => {
          console.log(loginRes)
          console.log(this.$store.state)
          identity(loginRes.appleInfo.identityToken).then(res => {
            if(res.code === 200){
              this.avatarUrl = ''
              this.isBinded = true
            }
            console.log(res)
          }).catch(err => {
            console.log(err)
          })
        }
      })
    },
    //取消绑定
    bindCancel(){
      this.popShow = true
    },
    //确定解绑
    confirmCancel(){
      unbind('apple').then(() => {
        this.isBinded = false
        this.popShow = false
      })
    }
  },
  options: { styleIsolation: "shared" },
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}
</style>
